{% extends "shared/layout.volt" %}
{% block content %}
    <h1 class="page-header">商户配置</h1>
    <div class="form-box" style="width: 850px;margin-top: 20px;">
        <form class="form-horizontal" method="post" enctype="multipart/form-data">
            <input type="hidden" name="merchant_id" value="{{ Model.merchant_id }}">
            {% if ErrorMessage is defined %}
            <p class="bg-danger" style="padding: 15px;">{{ ErrorMessage }}</p>
            {% endif %}
            {% if OkMessage is defined %}
                <p class="bg-success" style="padding: 15px;">{{ OkMessage }}</p>
            {% endif %}
            <div class="form-group">
                <label class="col-sm-3 control-label">商户名称</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="merchant_name" name="merchant_name" placeholder="商户名称" value="{{ Model.merchant_name }}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">商户图标</label>
                <div class="col-sm-9">
                    <div class="upload-select-picture-card">
                    <div class="upload-wrapper">
                        <div class="uploader-image-wrapper" id="uploadImageWrapper"{{ Model.merchant_image_url is not empty ? ' style="background:url('~ Model.merchant_image_url~')"' :'' }}>
                            <input type="file" accept="image/jpeg, image/jpg, image/png" id="btnUploader" name="merchant_image">
                        </div>
                    </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">启用状态</label>
                <div class="col-sm-9">
                    <div class="radio_box">
                        <label for="merchant_status1" class="enable{{ Model.merchant_status == 'y' ? ' selected' : '' }}">启用</label>
                        <label for="merchant_status2" class="disable{{ Model.merchant_status == 'n' ? ' selected' : '' }}">禁用</label>
                        <input type="radio" value="y" name="merchant_status" id="merchant_status1"{{ Model.merchant_status == 'y' ? ' checked="checked"' : '' }}>
                        <input type="radio" value="n" name="merchant_status" id="merchant_status2"{{ Model.merchant_status == 'n' ? ' checked="checked"' : '' }}>
                    </div>
                </div>
            </div>
            {#<div class="form-group">#}
                {#<label class="col-sm-3 control-label">应用密钥</label>#}
                {#<div class="col-sm-9">#}
                    {#<p class="form-control-static pull-left" style="padding-right: 15px;">21q5n8s3o8wuuj9lxye01x7a7gw18yp4</p>#}
                    {#<button type="button" class="btn btn-success btn-sm pull-left">重新生成</button>#}
                {#</div>#}
            {#</div>#}
            {% if Model.merchant_id is empty %}
                <div class="form-group">
                    <label class="col-sm-3 control-label">商户网关</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="gateway" name="gateway" placeholder="商户网关" value="">
                        <div class="sub-text">该商户下的交易会通过该网关通知商户</div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">RSA2(SHA256)密钥</label>
                    <div class="col-sm-9">
                        <textarea class="form-control textarea" id="merchant_public_cert" name="merchant_public_cert" placeholder="RSA2(SHA256)密钥" style="height: 120px;resize: none;">{{ Model.remark }}</textarea>
                        <div class="sub-text">系统用SHA256withRsa算法进行接口调用时的密钥解密（不限制密钥长度）</div>
                    </div>
                </div>
            {% endif %}
            <div class="form-group">
                <label class="col-sm-3 control-label">商户简介</label>
                <div class="col-sm-9">
                    <textarea class="form-control" id="remark" name="remark" placeholder="商户简介" style="height: 120px;resize: none;">{{ Model.remark }}</textarea>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-8">
                    <button type="submit" class="btn btn-success" data-loading-text="保存中...">确定</button>
                    <button type="button" class="btn btn-default" onclick="window.location=window.document.referrer;">返回</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}
{% block footer %}
<script type="text/javascript">
    $(function () {
       $("#btnUploader").on("change",function (e) {
           var file = this.files[0];
           var reader = new FileReader();
           // show表示<div id='show'></div>，用来展示图片预览的
           if(!/image\/\w+/.test(file.type)){
               layer.msg("请确保文件为图像类型");
               return false;
           }

           reader.onload = function(e){
               var image = new Image();
               image.src = URL.createObjectURL(file);
               image.onload = function (ev) {
                   var canvas = document.createElement("canvas");
                   canvas.width = 87;
                   canvas.height = 87;
                   var ctx = canvas.getContext("2d");

                   ctx.drawImage(image, 0, 0, 87, 87);

                   var dataURL = canvas.toDataURL("image/jpeg");

                   $("#uploadImageWrapper").css('background-image','url('+ dataURL +')');
               };
           };
           reader.readAsDataURL(file);
       }) ;
    });
</script>
{% endblock %}
